<template>
  <div class="cart">
    <div class="iconfont icon-gouwuche1" :class="{'icon-active':isEmpty}" @click="showCart()">
      <i class="iconfont icon-gouwuche"></i>
      <span v-if="totalPrice>0">{{totalCount}}</span>
    </div>
    <div class="select-goods">
      <div v-if="!isEmpty">未选购商品</div>
      <div v-else style="color:#fff;"> ¥{{totalPrice.toFixed(2)}}元</div>
      <div>另需配送费{{shopInfo.rst.float_delivery_fee}}元</div>
    </div>
    <div class="delivery" :class="{'active':isEmpty}">
      <button>
        <span v-if="!isEmpty"> ¥{{shopInfo.rst.float_minimum_order_amount}}元起送</span>
        <span v-else @click="sell()"> 去结算</span>
      </button>
    </div>
    <div class="cart-list animate__animated animate__fadeIn animate__faster" v-if="showCartView && isEmpty != false">
      <div class="chose-good">
        <div>已选商品</div>
        <div @click="emptyFood()">清空</div>
      </div>
      <div class="good-detail" v-for="(item,index) in selectFoods" :key="index">
        <div class="div">
          <div>{{item.name}}</div>
          <div style="color:#ff3e15;font-weight:bold;">¥{{item.activity.fixed_price}}</div>
          <div class="controll">
            <CartControll :food="item" @decreaseCount="decrease" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CartControll from '../../components/shops/CartControll.vue'
export default {
  props: {
    shopInfo: Object
  },
  name: 'ShopCart',
  data () {
    return {
      totalCount: 0,
      totalPrice: 0,
      selectFoods: [],
      showCartView: false
    }
  },
  created () {
    console.log(this.shopInfo.recommend);
  },
  computed: {
    isEmpty () {
      let empty = false;
      this.totalCount = 0;
      this.totalPrice = 0;
      this.selectFoods = [];
      this.shopInfo.recommend.forEach(recommend => {
        recommend.items.forEach(item => {
          if (item.count) {
            empty = true;
            this.totalCount += item.count;
            this.totalPrice += item.activity.fixed_price * item.count;
            this.selectFoods.push(item);
          }
        });
      });

      let goodList = []
      this.shopInfo.menu.forEach((menu) => {
        menu.foods.forEach((food) => {
          goodList.push(food)
        })
      })
      goodList = this.filterObj(goodList) //数据去重
      goodList.forEach(food => {
        if (food.count) {
          empty = true;
          this.totalCount += food.count;
          this.totalPrice += food.activity.fixed_price * food.count;
          this.selectFoods.push(food);
        }
      })
      return empty;
    }
  },
  methods: {
    filterObj (objcArray) {
      for (var i = 0; i < objcArray.length; i++) {
        for (var j = i + 1; j < objcArray.length;) {
          if (objcArray[i].name == objcArray[j].name) { //通过id属性进行匹配；
            objcArray.splice(j, 1); //去除重复的对象；
          } else {
            j++;
          }
        }
      }
      return objcArray;
    },
    openCart () {
      console.log(this.selectFoods);
    },
    // 计算商品数量
    decrease (e, foodId) {
      console.log(this.selectFoods);
      this.selectFoods.forEach(menu => {
        if (foodId == menu.item_id) {
          menu.count = menu.count + e;
        }
      });
    },
    emptyFood () {
      this.shopInfo.recommend.forEach(recommend => {
        recommend.items.forEach(item => {
          item.count = 0;
        });
      });
      this.shopInfo.menu.forEach(menu => {
        menu.foods.forEach(item => {
          item.count = 0;
        });
      });
      this.showCartView = false
    },
    showCart () {
      if (this.totalCount != 0) {
        this.showCartView = !this.showCartView
      }

    },
    sell () {
      // console.log(this.shopInfo.rst, this.selectFoods);

      this.$store.dispatch('setOrderInfo', {
        shopInfo: this.shopInfo.rst,
        selectFoods: this.selectFoods
      })
      console.log(this.$store.getters.orderInfo);
      this.$router.push('Settlement',)
    }
  },
  components: {
    CartControll
  }
}
</script>
<style  scoped>
.cart {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 11.8vh;
  background-color: rgb(87, 86, 86);
}
.icon-gouwuche1 {
  position: absolute;
  top: -0.4rem;
  left: 0.7rem;
  box-sizing: border-box;
  background-color: #2f2e31;
  height: 1.3rem;
  width: 1.3rem;
  text-align: center;
  line-height: 1.3rem;
  border-radius: 50%;
  color: #58555a;
  border: 0.1rem #7a7a85c4 solid;
  z-index: 222;
  box-shadow: 0 0 0.5rem #157aeeb2;
}
.icon-gouwuche1 span {
  position: absolute;
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  line-height: 0.6rem;
  border-radius: 50%;
  text-align: center;
  left: 0.8rem;
  top: -0.2rem;
  font-size: 0.1rem;
  background-image: linear-gradient(to right, #ff3e15, #dd8c7c);
  color: rgb(255, 255, 255);
  z-index: 2222;
}
.icon-active {
  background-color: #3088eb;
  color: #fff;
}
.icon-gouwuche {
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
  position: absolute;
  right: 15%;
  top: -0.1rem;
}

.select-goods div {
  width: 3rem;
  margin-left: 2.5rem;
  color: #8b8b8b;
  font-size: 0.2rem;
  margin-top: 0.2rem;
}
.delivery {
  color: #fff;
  /* margin-top: 0.4rem; */
  /* margin-left: 3rem; */
  position: absolute;
  right: 0;
}
button {
  background-color: rgba(255, 255, 255, 0);
  height: 5.6vh;
  width: 3rem;
}
.active {
  background-color: #30c36a;
}
.cart-list {
  position: fixed;
  bottom: 11.8vh;
  width: 100%;
  min-height: 3rem;
  background-color: rgb(255, 255, 255);
}
.chose-good {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.5rem;
  background-color: #e9ebef;
}
.good-detail .div {
  display: flex;
  justify-content: space-between;
  padding: 0 0.2rem;
  height: 1.3rem;
  line-height: 1.3rem;
  border-bottom: 0.05rem solid #ccc;
  align-items: center;
}
</style>
